<template>
  <div class="panel-wrap">
    <div class="panel-title">网格</div>
    <a-form-model :model="model" :label-col="labelCol" :wrapper-col="wrapperCol">
      <a-form-model-item label="显示网格" prop="visible">
        <a-switch v-model="model.visible" checked-children="显示" un-checked-children="隐藏"></a-switch>
      </a-form-model-item>
      <template v-if="model.visible">
        <a-form-model-item label="网格类型" prop="type">
          <a-select :options="meshTypeOptions" style="width: 100%" v-model="model.type" />
        </a-form-model-item>
        <a-form-model-item label="网格大小" prop="size">
          <slider :min="1" :max="20" :step="1" v-model="model.size" />
        </a-form-model-item>

        <a-form-model-item label="颜色" prop="color">
          <c-color-picker v-model="model.color" />
        </a-form-model-item>
        <a-form-model-item label="粗细" prop="thickness">
          <slider :min="0.5" :max="10" :step="0.5" v-model="model.thickness" />
        </a-form-model-item>
        <div v-if="model.type === 'doubleMesh'">
          <a-form-model-item label="次网颜色" prop="colorSecond">
            <c-color-picker v-model="model.colorSecond" />
          </a-form-model-item>
          <a-form-model-item label="次网粗细" prop="thicknessSecond">
            <slider :min="0.5" :max="10" :step="0.5" v-model="model.thicknessSecond" />
          </a-form-model-item>
          <a-form-model-item label="次网倍率" prop="factor">
            <slider :min="1" :max="10" :step="1" v-model="model.factor" />
          </a-form-model-item>
        </div>
      </template>
      <div class="panel-title">背景</div>
      <a-form-model-item label="颜色" prop="bgColor">
        <c-color-picker v-model="model.bgColor" />
      </a-form-model-item>

      <!-- <a-form-model-item label="显示Logo" prop="showImage">
        <a-switch v-model="model.showImage" checked-children="显示" un-checked-children="隐藏"></a-switch>
      </a-form-model-item>
      <template v-if="model.showImage">
        <a-form-model-item label="平铺方式" prop="repeat">
          <a-select :options="repeatOptions" style="width: 100%" v-model="model.repeat" />
        </a-form-model-item>
        <template v-if="model.repeat === 'watermark'">
          <a-form-model-item label="角度" prop="angle">
            <slider :min="0" :max="360" :step="1" v-model="model.angle" />
          </a-form-model-item>
          <a-form-model-item label="角度" prop="angle">
            <a-select :options="positionOptions" style="width: 100%" v-model="model.position" />
          </a-form-model-item>
        </template>

        <a-form-model-item label="大小" prop="bgSize">
          <a-select :options="bgSizeOptions" style="width: 100%" v-model="model.bgSize" />
        </a-form-model-item>

        <a-form-model-item label="大小" prop="bgSize">
          <slider :min="20" :max="300" :step="5" v-model="model.bgSize" />
        </a-form-model-item>
        <a-form-model-item label="透明度" prop="opacity">
          <slider :min="0.05" :max="1" :step="0.05" v-model="model.opacity" />
        </a-form-model-item>
      </template> -->
    </a-form-model>
  </div>
</template>

<script>
import Slider from '../../Slider'
import { backGroundOpt, gridOpt, gridSizeOpt } from './method'
import { meshTypeOptions, positionOptions } from './options'

export default {
  name: 'ConfigGrid',
  components: {
    Slider
  },
  props: {
    globalGridAttr: {
      type: Object,
      default: null,
      required: true
    }
  },
  data() {
    return {
      model: { ...this.globalGridAttr },
      meshTypeOptions,
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
      positionOptions
      // repeatOptions
    }
  },
  mounted() {
    gridOpt(this.model)
    gridSizeOpt(this.model)
    backGroundOpt(this.model)
  },
  computed: {
    gridOptCpt() {
      return {
        type: this.model.type,
        color: this.model.color,
        thickness: this.model.thickness,
        thicknessSecond: this.model.thicknessSecond,
        colorSecond: this.model.colorSecond,
        factor: this.model.factor,
        visible: this.model.visible
      }
    },
    gridSizeOptCpt() {
      return {
        size: this.model.size
      }
    },
    backGroundOpt() {
      return {
        bgColor: this.model.bgColor,
        showImage: this.model.showImage,
        repeat: this.model.repeat,
        angle: this.model.angle,
        bgSize: this.model.bgSize,
        position: this.model.position,
        opacity: this.model.opacity
      }
    }
  },
  watch: {
    // 监听网格变化
    gridOptCpt: {
      handler(nv) {
        gridOpt(nv)
      },
      immediate: false,
      deep: false
    },
    // 监听网格大小变化
    gridSizeOptCpt: {
      handler(nv) {
        gridSizeOpt(nv)
      },
      immediate: false,
      deep: false
    },
    // 监听背景变化
    backGroundOpt: {
      handler(nv) {
        backGroundOpt(nv)
      },
      immediate: false,
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
@import '../style.less';
</style>
